<template>
  <div class="publish_list">
    <header-bar tittle="我的发布" />
    <div class="bg"></div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="list" id="list">
        <van-list v-model="loading" :finished="finished" @load="onLoad">
          <van-cell
            v-for="item in Alllists"
            :key="item.id"
            @click="
              reach(
                item.id,
                item.name,
                item.total_amount,
                item.num,
                item.accept_num
              )
            "
          >
            <div class="itemList u-flex-bet">
              <div class="u-flex">
                <van-image
                  width="88rem"
                  height="88rem"
                  round
                  :src="item.avatar ? item.avatar : defaults"
                />
                <div class="item">
                  <div class="title1">{{ item.name }}</div>
                  <div class="title2">
                    剩余数量:<span style="color: #FF4343;">{{
                      item.accept_num
                    }}</span
                    >/{{ item.num }}
                  </div>
                </div>
              </div>

              <div class="statu u-flex">
                <div>+{{ item.price }}</div>
                <van-image
                  width="36rem"
                  height="36rem"
                  :src="require('@/assets/images/index/icon_coin@2x.png')"
                />
              </div>
            </div>
          </van-cell>
        </van-list>

        <!-- <div class="itemList">
				<van-image width="35" height="35" round src="https://img.yzcdn.cn/vant/cat.jpeg" />
				<div class="item">
					<div class="title1">微信登录领10元</div>
					<div class="title2">剩余数量:9/10</div>
				</div>
				<div class="statu">
					<div>500</div>
					<div>众币</div>
				</div>
			</div> -->
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from "vue";
import header from "@/components/header/header.vue";
import { Field } from "vant";
import {
  Button,
  Toast,
  Image as VanImage,
  Cell,
  CellGroup,
  List,
  Tab,
  Tabs,
} from "vant";
import { API_PATH } from "@/api/index.js";
import { TASK_PUBLISH_LIST } from "@/api/api.js";

Vue.use(Field);
Vue.use(VanImage);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(List);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "orderList",
  components: {
    [header.name]: header,
    [Button.name]: Button,
  },
  data() {
    return {
      value1: "",
      value2: "",
      list: [],
      // 下拉
      Alllists: [],
      curId: 0,
      // 下拉
      isLoading: true,
      loading: false,
      finished: false,
      time: 0,
      p: "",
      defaults: require("../.././assets/images/avator.png"),
    };
  },
  mounted() {
    this.getAllList();
  },
  methods: {
    onLoad() {
      this.loading = false;
      if (this.time != 0) {
        let that = this;
        that.LoadList(that.p);
      }
    },
    onRefresh() {
      this.getAllList();
      let that = this;
      setTimeout(() => {
        that.isLoading = false;
        that.finished = false;
        that.loading = false;
      }, 1000);
      that.$nextTick(() => {
        document.querySelector("#list").scrollTop = 0;
      });
    },
    async getAllList() {
      const { data } = await this.$reqGet(TASK_PUBLISH_LIST, {});
      if (data.status == 1) {
        let list = data.data.list;
        let p = data.data.nextPage.value;
        this.p = p;
        this.Alllists = list;
        this.time = 1;
        this.loading = false;
        this.finished = false;
      }
    },
    async LoadList(p) {
      this.loading = true;
      if (p) {
        const { data } = await this.$reqGet(TASK_PUBLISH_LIST, {
          p: p,
        });
        if (data.status == 1) {
          let list = data.data.list;
          let p = data.data.nextPage.value ? data.data.nextPage.value : false;
          this.p = p;
          this.Alllists = this.Alllists.concat(list);
          this.loading = false;
        }
      } else {
        this.finished = true;
      }
    },
    reach(id, name, amount, num, accept_num) {
      let data = {
        id: id,
        name: name,
        amount: amount,
        num: num,
        accept_num: accept_num,
      };
      let datas = encodeURI(JSON.stringify(data));
      this.$router.push({ name: "publishDetailList", query: { data: datas } });
    },
  },
};
</script>

<style lang="scss" scoped>
.publish_list {
  min-height: 100vh;
  background-color: #f5f5f5;

  .bg {
    height: 212rem;
    background: linear-gradient(
      180deg,
      #2f81fe 80%,
      rgba(47, 129, 254, 0) 100%
    );
  }

  .list {
    padding: 24rem;

    .van-cell {
      margin-bottom: 24rem;
      border-radius: 20rem;

      .itemList {
        .item {
          margin-left: 34rem;

          .title1 {
            font-weight: bold;
            font-size: 32rem;
          }

          .title2 {
            color: #999;
            font-size: 28rem;
          }
        }

        .statu {
          color: #ff3434;
          font-weight: bold;
          font-size: 36rem;

          > div {
            margin-right: 12rem;
          }
        }
      }
    }
  }
}
</style>
